<template>
  <div class="topLogo">
    <div class="logo">
      <span v-if="!collapsed">管理中台</span>
      <span v-else></span>
    </div>
    <a-menu
      theme="dark"
      mode="inline"
      :defaultSelectedKeys="routerKey"
      :openKeys="openKeys"
      @openChange="onOpenChange"
    >
      <a-sub-menu v-for="item in subList" :key="item.key">
        <span slot="title">
          <a-icon :type="item.type"></a-icon>
          <span>{{ item.label }}</span>
        </span>
        <a-menu-item v-for="_item in item.children" :key="_item.key" style="padding-left: 80px;">
          <router-link :to="_item.to"><span class="circle"></span>   {{ _item.label }}</router-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  props: {
    collapsed: {
      type: Boolean,
      detail: false
    }
  },
  data() {
    return {
      // monitor：系统监控， system：系统管理， shopping： 商户管理， orderTitle：订单管理， personalTitle：个人管理，channelTitle: 通道管理 
      rootSubmenuKeys: ["monitor", "system", "shopping", "production", "orderTitle", "personalTitle", "channelTitle", "task", "member", "content", "invite", "accout", "examine"],
      openKeys: ["system"],
      routerKey: ["logs"],
      // routerKey: [],
      // num: 0,
      monitData: ["logs", "redis",  "error",  "sql"], //系统监控
      // systemData: ["dict", "menu", "job", "user", "dept", "role", "payType"], //系统管理
      systemData: ["dict", "notice", "timing", "menu","user", "role"], //系统管理
      shoppingData: ["business", "Settled", "freight", "category", "merchant", "enterCheck"], //商户管理
      productionData: ["product"], //商品
      // orderData: ["merchOrder"], //订单管理
      // personalData: ["setting"], //个人管理
      // channelData: ["channel"], //通道管理
      // taskData: ["taskPage", "taskType","taskReviewe"], //任务管理
      // memberData: ["memberPage", "memberVIP", "memberBank"], //会员管理
      // contentData: ["category", "article", "banner"], //内容管理
      // inviteData: ["upgrade", "invite", "inviteConfig"], // 推广管理
      // accoutData: ["offLine"], // 账户中心
      // examineData: ["examineRecharge", "drawal"], //审核管理
      cachedOpenKeys: []
      // subList: [
      //   {
      //     key: "monitor",
      //     type: "user",
      //     label: "系统监控",
      //     children: [
      //       { key: "log", to: "/log", label: "操作日志" },
      //       { key: "redis", to: "/redis", label: "系统缓存" },
      //       { key: "error", to: "/error", label: "异常日志" },
      //       { key: "sql", to: "/sql", label: "SQL监控" }
      //     ]
      //   },
      //   {
      //     key: "system",
      //     type: "video-camera",
      //     label: "系统管理",
      //     children: [
      //       { key: "dict", to: "/dict", label: "字典管理" },
      //       { key: "menu", to: "/menu", label: "菜单管理" },
      //       { key: "button", to: "/button", label: "按钮管理" },
      //       { key: "job", to: "/job", label: "岗位管理" },
      //       { key: "user", to: "/user", label: "用户管理" },
      //       { key: "dept", to: "/dept", label: "部门管理" },
      //       { key: "role", to: "/role", label: "角色管理" }
      //     ]
      //   }
      // ]
    };
  },
  computed: {
    ...mapState({
      subList: state => state.router.sub
    })
  },
  created() {
    // console.log(1111111111111111,this.collapsed, this.subList)
    this.showStyle()
    // this.collapsedStyle(this.collapsed )
  },
  watch: {
    collapsed (val) {
      this.collapsedStyle(val)
    }
  },
  methods: {
    // updateMenu () {
    //   const routes = this.$route.matched.concat()
    //   const { hidden } = this.$route.meta
    //   if (routes.length >= 3 && hidden) {
    //     routes.pop()
    //     this.selectedKeys = [routes[routes.length - 1].path]
    //   } else {
    //     this.selectedKeys = [routes.pop().path]
    //   }
    //   const openKeys = []
    //   if (this.mode === 'inline') {
    //     routes.forEach(item => {
    //       openKeys.push(item.path)
    //     })
    //   }
    //   this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
    // },
    collapsedStyle(val){
      if (val) {
        this.cachedOpenKeys = this.openKeys.concat()
        this.openKeys = []
      } else {
        this.openKeys = this.cachedOpenKeys
      }
        // console.log(this.subList,this.openKeys, '4444444')
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
      // console.log(this.openKeys, '000000000')
    },
    showStyle () {
      let href = window.location.href;
      let url = href.split("#");
      let _url = url[1].split('/')[1]
      console.log(this.productionData.includes(_url), _url)
      // debugger
      if (url[1] !== "/") {
        this.routerKey[0] = _url;
        if (this.monitData.includes(_url)) {
          this.openKeys = ["monitor"]
        } else if (this.systemData.includes(_url)) {
          this.openKeys = ["system"]
        } else if (this.shoppingData.includes(_url)){
          this.openKeys = ["shopping"]
        } else if (this.productionData.includes(_url)){
          this.openKeys = ["production"]
        } 
        // else if(this.orderData.includes(_url)){
        //   this.openKeys = ["orderTitle"]
        // } else if(this.personalData.includes(_url)){
        //   this.openKeys = ["personalTitle"]
        // } else if(this.channelData.includes(_url)){
        //   this.openKeys = ["channelTitle"]
        // } 
        // else if(this.taskData.includes(_url)){
        //   this.openKeys = ["task"]
        // } else if(this.memberData.includes(_url)){
        //   this.openKeys = ["member"]
        // } else if(this.contentData.includes(_url)){
        //   this.openKeys = ["content"]
        // } else if(this.inviteData.includes(_url)){
        //   this.openKeys = ["invite"]
        // } else if(this.accoutData.includes(_url)){
        //   this.openKeys = ["accout"]
        // } else if(this.examineData.includes(_url)){
        //   this.openKeys = ["examine"]
        // }
        // this.openKeys = this.monitData.includes(_url) ? ["monitor"] : ["system"]
      }
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
  // background-color: #fff;
  background: url("../assets/image/men-selected.png") no-repeat center center;
  background-size: cover;
}
/deep/ .ant-menu-dark .ant-menu-item-selected > a, .ant-menu-dark .ant-menu-item-selected > a:hover {
  color: #8A2CFF;
}

/deep/ .ant-menu-dark .ant-menu-item-selected > a, .ant-menu-dark .ant-menu-item-selected > a {
  color: #8A2CFF;
}

.circle {
  display: inline-block;
  vertical-align: middle;
  background-color: #fff;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
}

/deep/ .ant-menu-dark .ant-menu-item-selected .circle {
  background-color: #8A2CFF;
}
.topLogo {
  height: 150px;
}
  .logo{
  //   font-family: 'SunXiaoSongXiaFenTi';
  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  //   height: 32px;
    margin: 16px 5px;
    // color: #34ce49;
    // color: #52c41a;
    // color: rgb(135, 208, 104);
    color: #fff;
    overflow: hidden;
          text-align: center;
    span{
      font-size: 26px;
      font-weight: 900;
      // width: 90px;
    }
  }
</style>